
/*************************************************************
*
* Estilos Genéricos
*
**/

body {
	font-family: Arial, Tahoma, sans-serif;
	font-size: 12px;
	background: url('../img/fondoCabecera.png') 0 0 repeat-x;
}


.fl {float: left;}  	/* clase genérica para flotar a la izquierda */
.fr {float: right;}	/* clase genérica para flotar a la derecha. Esto nos permite saber a simple vista en el html que le afecta y no tenemos que aplicarlo a cada elemento en el css */


a {
	text-decoration: none;
	color: #DD0C46;
}



/*************************************************************
*
* Estilos Estructuras Básicas
*
**/

.contenedor960 {
	width: 960px;		/* útil para extender efectos fuera de los márgenes de 960, aplicando este estilo en otros más genéricos como cabecera y menu */
	margin: 0 auto;   	/* top y bottom a 0px y left y right lo establece el navegador */
	overflow: hidden; 	/* si sobresale algún elemento este se oculta */
}

/*************************************************************
*
* Estilos Cabecera
*
**/

#cabecera {
	height: 131px;  
}

	#cabecera h1 {
		color: #e00d3b;
		font-size: 22px;
		margin-top: 30px;
	}

	#cabecera h2 {
		color: #999999;
		font-size: 16px;
		margin-top: 10px;
		margin-right: 50px;
	}
	
	#cabecera img{
		padding-left: 10px;
	}


.logo {
	margin-top: 29px;
}




/*************************************************************
*
* Estilos MENU
*
**/

#menu {
	background: url('../img/fondoMenu.png') 0 0 repeat-x;
	height: 79px;
}

	#menu ul {
		margin-left: 100px;
	}

	#menu ul li{
		float: left;
		display: inline;
	 	margin: 23px 75px 0 0; 
	}
	
	#menu ul li a{
		color: white;
		font-size: 14px;
		text-decoration: none;
		text-transform: uppercase;
	}
	
	
	#menu ul li a:hover{
		color: #92979D;
	}
	
	#menu ul li a span{
			color: #606168;
			font-size: 12px;
			text-transform: lowercase;
			display: block;
			padding-right: 30px;
	}
	
	
	
	
/*************************************************************
*
* Estilos SLIDER - Control deslizante 
*
**/

#slider {
	background: url('../img/fondoSlider_oscuro.png') 0 0 repeat-x;
	height: 300px;
        padding-top: 20px;
}

#slider_grupo {
	background: url('../img/fondoSlider_oscuro.png') 0 0 repeat-x;
	height: 300px;
        padding-top: 20px;
}

#slider_grupo div {
	background-color: rgb(26,27,31);
}

/* 
    Document   : slider
    Created on : 01-nov-2011, 19:55:48
    Author     : agustinjf
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

#slideshow {
    margin:0 auto;
    width:640px;
    height:263px;                        
    position:relative;
}

#slideshow #slidesContainer {
    margin:0 auto;
    width:560px;
    height:263px;
    overflow:auto; /* allow scrollbar */
    position:relative;
}
#slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
}

/** 
 * Slideshow controls style rules.
*/
.control {
    display:block;
    width:39px;
    height:263px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
}
#leftControl {
    top:0;
    left:0;
    background:transparent url(../img/control_left.jpg) no-repeat 0 0;
}
#leftControl:hover {
    top:0;
    left:0;
    background:transparent url(../img/control_left_hover.jpg) no-repeat 0 0;
}
#rightControl {
    top:0;
    right:0;
    background:transparent url(../img/control_right.jpg) no-repeat 0 0;
}
#rightControl:hover {
    top:0;
    right:0;
    background:transparent url(../img/control_right_hover.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
*/                                      
#pageContainer {
    margin:0 auto;
    width:960px;
}
#pageContainer h1 {
    display:block;
    width:960px;
    height:114px;                        
    text-indent: -10000px;
}
.slide h2, .slide p {
    margin:15px;
}
.slide h2 {
    font:italic 24px Georgia, "Times New Roman", Times, serif;
    color:#ccc;
    letter-spacing:-1px;
}

.slide p{                        
    color:#ccc;
}
.slide img {
    float:right;
    margin:0 15px;
}



/*************************************************************
*
*Estilos CUADRO DE INFORMACION - grupo.html
*
**/

#informacion{
    height: 300px;
    padding-top: 20px;
}

#informacion_container{
    margin:0 auto;
    width:500px;
    height:245px;
    overflow: hidden; /* allow scrollbar */
    position:relative;
    border-style: solid;
    border-width: 10px;
    border-color: #ff0066;
/*    border-radius: 30px;
    border-radius: 10px;*/
    background: url('../img/fondo3Columnas.png') 0 0 no-repeat;
}

#informacion_container img{
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

#informacion_container p{
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14px;
}

#atras{
    margin-top: 10px;
    margin-left: 10px;
    font-size: 14px;
    text-decoration: underline;
    color: #0033ff;
    cursor: pointer;
}
/*************************************************************
*
*Estilos SLIDER GRUPO
*
**/

#slideshow #slidesContainer_grupo {
    margin:0 auto;
    width:300px;
    height:263px;
    overflow: hidden; /* allow scrollbar */
    position:relative;
    background: url('../img/fondo3Columnas.png') 0 0 no-repeat;
}

#slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
}

#slideshow #slidesContainer_grupo .slide_grupo {
    margin:0 auto;
    width:280px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
    cursor: pointer;
}


.slide_grupo h2, .slide_grupo p {
    margin:15px;
}


.slide_grupo h2 {
    font:italic 24px Georgia, "Times New Roman", Times, serif;
    color: #606168;
    letter-spacing:-1px;
}

.slide_grupo p{                        
    color:#ccc;
}

.slide_grupo img {
    float: right;
    margin:0 15px;
}



/*************************************************************
*
* Estilos ZONA 3 COLUMNAS
* 
**/
	
#contenedor3Columnas {
	background: url('../img/fondo3Columnas.png') 0 0 no-repeat;
	height: 245px;
}

	#contenedor3Columnas h3 {
		color: #929292;
		font-size: 18px;
		margin-top: 10px;

	}
	
	#contenedor3Columnas p {
	    color: #919295; 
		clear: left;   /* con esto conseguimos que se muestre debajo de la imagen de adorno y no a su alrededor */
	}
	
	


.columnaIndividual_3col {
	width: 285px;
	margin: 35px 35px 0 0;
	float: left;
	text-align: justify; 
}
	
	.columnaIndividual_3col img {
		margin: 0 15px 15px 0;
	}
	
	.columnaIndividual_3col ul li{
		background: url('../img/adorno_Lista.png') center left no-repeat;
		color: #3797e7;
		padding: 3px 3px 3px 20px;
		margin-top: 15px;
	}
	
	.columnaIndividual_3col a {
		color: #1e80d2;
		text-decoration: none;
	}
	
	.columnaIndividual_3col a:hover {
		text-decoration: underline;
	}



	
	
	
	
/*************************************************************
*
* Estilos ZONA 2 COLUMNAS - Contenido 
* 
**/
	
	
#contenedor2Columnas {
	margin-top: 50px;
	text-align: justify;
}

	#contenedor2Columnas h3 {
		color: #1e80d2;
		font-size: 13px;
		text-transform: uppercase;
		word-spacing: 4px;
		letter-spacing: 2px;
		margin-bottom: 20px;		
	}
	
	#contenedor2Columnas p {
		color: #444549;
		margin-bottom: 10px;
	}	
	
	#contenedor2Columnas h4 {
		color:  #444549;
		font-size: 12px;
		font-weight: bold;
                margin-bottom: 10px;
		
	}
	
		#contenedor2Columnas h4 span {
			color: red;
		}



#columna_izq {
	width: 480px;
	/* border: 1px solid blue; */
}

	#columna_izq iframe {
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	#columna_izq a {
		font-size: 13px;
		text-decoration: none;
		color: red;
	}
		
	#columna_izq a:hover {
		text-decoration: underline;
	}	
	
	


#columna_dcha {
	width: 360px;
	/* border: 1px solid red; */
	margin-bottom: 100px;
}	
        
	#columna_dcha ul li {
		border-bottom: 1px solid #e1e4e8;
	}
	
	
		#columna_dcha ul li span {
			color: #919295;
			display: block;
			margin-bottom: 20px;
			margin-top: 20px;		
		}

		
		#columna_dcha ul li p {
			margin-bottom: 20px;
		}
	

	
	
	
	
	
/*************************************************************
*
* Estilos PIE de Página
* 
**/
	

#pie {
	margin-top: 30px;
	padding-top: 30px;
	background: url('../img/fondo_pie_claro.png') 0 0 repeat;
	height: 160px;
}

	#pie h3 {
		color: #ff6992;
		font-size: 13px;
		text-transform: uppercase;
		word-spacing: 4px;
		letter-spacing: 2px;
		margin-bottom: 20px;
	}
	
	#pie p {
		color: silver;
		text-align: justify;
	}
	
	#pie ul li {
		background: url('../img/decoracion_lista_circulo.png') left center no-repeat;
		padding: 5px 15px;
	}
	
	
	#pie a {
		
		color: white;
		text-decoration: none;

		
	}
	
		#pie a:hover {
			color: #88bfed;
		}
		
#twitter a:hover {
	background: url('../img/social/twitterOver.png');
}


#pie_col_Izquierda {
	width: 335px;
	margin-right: 145px;
}

#pie_col_Izquierda img {
	margin-top: 20px;
	margin-right: 5px;
}

#pie_col_Izquierda p {
    margin-bottom: 15px;
}

#pie_col_Centro {
	width: 120px;
	margin-right: 229px;

}


#pie_col_Derecha{
	width: 131px;
        text-align: center;

}

    #pie_col_Derecha p{
        margin-bottom: 15px;
        text-align: center;
    }


#copyright {
	background: url('../img/fondo_pie_oscuro.png') 0 0 repeat;
	height: 40px;
	text-align: center;
	color: #aaaaaa;
	padding-top: 28px;
}
/*************************************************************
*
*                   ESTILOS DE RECURSOS.HTML
*
**/

                    /* MENU DESPLEGABLE */

/* ESTILO BLACK */
.menuRecursos {
	width: 200px;
	margin-top: 100px;
        margin-right: 100px;
        float:left;
}

	
.menuRecursos a{
	color: rgb(199,199,200);
	display: block;
	background-image: url('../img/menuRecursos/visitedBlack.jpg');
        background-repeat:no-repeat;
	padding: 8px 0 0 20px;
}
	
.menuRecursos a:hover {
	color: rgb(199,199,200);
	background-image: url('../img/menuRecursos/hoverBlack.jpg');
        background-repeat:no-repeat;
	padding: 10px 0 0 25px;
}
	
.menuRecursos a:active {
	color: #777;
	background-image: url('../img/menuRecursos/activeBlack.jpg');
        background-repeat:no-repeat;
	padding: 8px 0 0 25px;
}

.menuRecursos ul {
	list-style: none;
	margin-top: 3px;
	padding: 0;
}

.submenu a{
    background-image: url('../img/menuRecursos/subvisitedBlack.jpg');
    color: rgb(199,199,200);
    display: block;
    background-repeat:no-repeat;
    padding: 8px 0 0 20px;
}

.submenu a:hover{
    background-image: url('../img/menuRecursos/subhoverBlack.jpg'); 
    color: rgb(199,199,200);
    background-repeat:no-repeat;
    padding: 10px 0 0 25px;
}

.submenu a:active{
    background-image: url('../img/menuRecursos/subactiveBlack.jpg');
    color: #777;
    background-repeat:no-repeat;
    padding: 8px 0 0 25px;
}

ul.submenu{
    margin-left: 25px;
}

.descripcionModulobg{
    color: rgb(199,199,200);
    background-image: url('../img/recursos/descripcionBg.jpg');
    background-repeat: repeat;
    margin-top: 20px;
}

/* ESTILO SOFT */

.menuRecursosSoft {
	width: 200px;
	margin-top: 100px;
        margin-right: 50px;
        float:left;
}
	
.menuRecursosSoft a{
	color: rgb(199,199,200);
	display: block;
	background-image: url('../img/menuRecursos/visited.jpg');
        height: 28px;
        background-repeat:no-repeat;
	padding: 8px 0 0 20px;
}
	
.menuRecursosSoft a:hover {
	color: rgb(199,199,200);
	background-image: url('../img/menuRecursos/hover.jpg');
        height: 28px;
        background-repeat:no-repeat;
	padding: 10px 0 0 25px;
}
	
.menuRecursosSoft a:active {
	color: #777;
	background-image: url('../img/menuRecursos/active.jpg');
        height: 28px;
        background-repeat:no-repeat;
	padding: 8px 0 0 25px;
}

.submenuSoft a{
    background-image: url('../img/menuRecursos/subvisited.jpg');
    color: rgb(199,199,200);
    display: block;
    height: 28px;
    background-repeat:no-repeat;
    padding: 8px 0 0 20px;
}

.submenuSoft a:hover{
    background-image: url('../img/menuRecursos/subhover.jpg'); 
    color: rgb(199,199,200);
    height: 28px;
    background-repeat:no-repeat;
    padding: 10px 0 0 25px;
}

.submenuSoft a:active{
    background-image: url('../img/menuRecursos/subactive.jpg');
    color: #777;
    height: 28px;
    background-repeat:no-repeat;
    padding: 8px 0 0 25px;
}

ul.submenuSoft {
    margin-left: 10px;
}

.descripcionModuloSoftbg{
    color: #444549;
    background-color: rgb(227,233,255);
    background-image: none;
    margin-top: 0 ;
}
                               /* DEMÁS */
.descripcionModulo h3{
    color: #929292;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
}

.descripcionModulo h4{
    color: gray;
    font-size: 12px;
    text-transform: lowercase;
    display: block;
}
.calendario{
    float:left;
    width: 500px;
}

.descripcionArchivos{
    width: 200px;
    height: 20px;
    margin-left: 500px;
    margin-top: 230px;
    position: absolute;
}
.archivosPrimeraLinea{
    margin-top: 30px;
    width: 500px;
    float: left;
}
.archivosSegundaLinea{
    margin-top: 30px;   
    width: 500px;
    float: left;
}

.boton{
    background-image: url('../img/recursos/botonEstilo.jpg');
    background-repeat: no-repeat;
    color: #1e80d2;
    float: left;
    width: 73px;
    height: 33px;
    padding-left: 6px;
    padding-top: 6px;
    margin-top: 10px;
}

.boton:hover{
    background-image: url('../img/recursos/botonEstiloHover.jpg');
}

.boton:active{
    background-image: url('../img/recursos/botonEstiloActive.jpg');
}	